<template>
	<div style="display: flex;flex-direction: column;" class="otherPage productsAndServices mainProductsInfo">
		<Header :selected="5"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''"></div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="2" :bgColor="bgColor">
		</Navigation>
		<div class="content" style="min-height: 600px;">
			<div class="content_bg" style="min-height: 600px; position: relative;">
				<div class="swiper-container" ref="Minproduct" id="Minproduct">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="(slide, index) in productMainFileList" :key="index">
							<img :src="slide.fileUrl" style="width: 100%; height: 100% ;" />
						</div>
					</div>
					<div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
				</div>
				<el-row>
					<el-col class="corporateNewsDetailDescription">
						<div v-html="content.setWrap()"></div>
					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	import {
		productsAndServicesMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination
		},
		data() {
			return {
				loading: true,
				data: [],
				pageSize: 10,
				total: 10,
				currentPage: 1,
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: productsAndServicesMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('productsAndServices'),
						to: '/productsAndServices'
					},
					{
						//主营产品
						label: this.$t('mainProducts'),
						to: '/mainProducts'
					}
				],
				hoverIndex: -1,
				data: {
					titles: '',
					months: '',
					content: ''
				},
				productMainFileList: [],
				content: ''

			};
		},
		computed: {},
		created() {},
		mounted() {
			this.initPage();
			this.bindBg();
			this.id = this.$route.query.id;
			this.bindMinProductList().then(i => {
				this.initProductSwiper();
				//this.$request.setImageMaxwidth("img");
			});
		},
		methods: {

			/**
			 * (1)	获取科技研发顶部背景
			 * http://127.0.0.1:9999/openApi/products/getSaleNoticeTopImage
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.productBgImage(params).then(res => {
					this.bg_img = res.data.fileUrl
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});
			},
			initProductSwiper() {
				this.productSwiper = new Swiper(this.$refs.Minproduct, {
					keyboard: true,
					slidesPerView: 1,
					spaceBetween: 10,
					pagination: {
						el: '.swiper-pagination',
					},
				});
			},
			/**http://123.132.237.18:17394/openApi/products/productMainDetail
			 *  
			 */
			bindMinProductList() {

				return new Promise((resolve, reject) => {
					let params = {
						productMainId: this.id
					};
					let that = this;
					that.$request.productMainDetail(params).then(res => {
						this.content = res.data.content
						this.productMainFileList = res.data.productMainFileList
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},

			initPage() {

			},
			gotoNewList() {
				this.$router.push({
					name: "党建新闻列表"
				});
			}

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/productsAndServices/productsAndServices.css");

	.mainProductsInfo .newArea {
		height: auto;
	}

	.mainProductsInfo .slide-content,
	.mainProductsInfo .slide-content img,
	.mainProductsInfo .swiper-slide,
	.mainProductsInfo .swiper-container {
		height: 50vh;
	}

	.mainProductsInfo .paginationArea {
		height: 70px;
		line-height: 70px;
		justify-content: center;
		padding-top: 20px;
	}

	.mainProductsInfo .moreInfoBtn {
		width: 97px;
		height: 30px;
		line-height: 30px;


		text-align: center;
		color: #0484D7;

		font-size:
			16px;
		margin-top: 2vh;
		margin-left: 10px;
	}

	.mainProductsInfo .moreInfoBtn:hover {
		background-color: ##0396f0;
		color: #0396f0;
	}

	.mainProductsInfo .news-list .news-item {
		height: 22vh;
		/* 	margin-bottom: 1vh ; */
		border-bottom: 2px solid #E8E6E5;
	}



	.centreOfExcellence .news-list .date {
		border-bottom: 2px solid #E8E6E5;
		height: 20vh;
		background: #EDEDED;
	}

	.mainProductsInfo .news-list .title {
		font-size: 16px;
		font-weight: 400;
		color: #333333;
		line-height: 34px;
	}

	.mainProductsInfo .news-list .number-of-views {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		line-height: 34px;
	}

	.mainProductsInfo .news-list .description {
		font-size: 14px;
		font-weight: 400;
		color: #666666;
		line-height: 34px;
	}

	.mainProductsInfo .news-list .day {
		text-align: center;
		font-size: 2em;
		padding-top: 5vh;
		height: 12vh;
		font-weight: 400;
		color: #0484D7;
	}

	.mainProductsInfo .news-list .month-year {
		text-align: center;
		font-size: 1.2em;
	}

	.mainProductsInfo .btn-next span {
		min-width: 50px !important;
	}

	.el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px !important;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.news-item {
		margin-bottom: 20px;
		cursor: pointer;
		overflow: hidden;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.mainProductsInfo .news-item:hover {
		transform: scale(0.98)
	}

	.corporateNewsDetailTitle {
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		text-align: center;
		font-weight: 400;
		color: #333333;
	}

	.corporateNewsDetailDate {
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-weight: 400;
		color: #999999;
		line-height: 33px;
	}

	.corporateNewsDetailDescription {
		font-weight: 400;
		color: #666666;
		line-height: 27px;
		width: 100%;
		padding: 0px 5%;
		margin-top: 6vh;
	}

	.mainProductsInfo .swiper-button-prev {
		top: -243px;
		background-size: 3vh;

	}

	.swiper-button-prev,
	.swiper-container-rtl .swiper-button-next {
		left: 27px !important;

	}

	.swiper-button-next,
	.swiper-container-rtl .swiper-button-prev {
		right: 27px !important;

	}

	.mainProductsInfo .swiper-button-next {
		top: -243px;
		background-size: 3vh;

	}

	#Minproduct {
		width: 60%;
		margin: 0 auto;
	}

	.mainProductsInfo .swiper-wrapper {
		width: 60%;
	}



	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.companyCultureImgArea {
			width: 60%;
		}

		.companyCultureContent {}

	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
	}

	@media (max-width: 1024px) {}

	@media (max-width: 900px) {}

	@media (max-width: 768px) {

		.mainProductsInfo .swiper-button-prev,
		.mainProductsInfo .swiper-button-next {
			display: none;
		}

		#Minproduct,
		.mainProductsInfo .swiper-wrapper {
			width: 100%;
			margin: 0 auto;
		}

		.mainProductsInfo .slide-content,
		.mainProductsInfo .slide-content img,
		.mainProductsInfo .swiper-slide,
		.mainProductsInfo .swiper-container {
			height: 20vh;
		}
	}

	@media (max-width: 430px) {


		#Minproduct,
		.mainProductsInfo .swiper-wrapper {
			width: 100%;
			margin: 0 auto;
		}

		.mainProductsInfo .slide-content,
		.mainProductsInfo .slide-content img,
		.mainProductsInfo .swiper-slide,
		.mainProductsInfo .swiper-container {
			height: auto;
		}
	}
</style>